<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-22 14:59:28
 * @LastEditTime: 2021-07-27 13:49:55
-->

<template>
  <div class="room-control">
    <div class="room-left" ref="modelingSettingsLeft">
      <housing-model-aside @onSearch="onBuilding" :productId="opt.productId"
        :buildingId="opt.buildingId" :productTypeSmall="opt.productType">
      </housing-model-aside>
    </div>

    <div class="room-right">
      <room-info :buildingAlias='building.buildingAlias' :isImported='room.isImported'
        :selectLength='select.length' :counts='counts' @controlStatus='onControlStatus'>
      </room-info>

      <house-room ref="houseRoom" :propUnitDTOS="room.unitDTOS" :productType="room.productType"
        :isImported="room.isImported" isControl=true @roomSelChange='onRooms'>
      </house-room>
    </div>
  </div>
</template>

<script>
  import controlMgr from '@/biz/sales/control'
  import houseRoom from '../../buildingModeling/modelingSettings/components/houseRoom.vue'
  import housingModelAside from '../../buildingModeling/modelingSettings/components/housingModelAside.vue'
  import roomInfo from './components/roomInfo.vue'

  export default {
    components: {
      housingModelAside,
      houseRoom,
      roomInfo
    },
    data() {
      return {
        opt: {},

        building: {},
        counts: [],

        room: {},
        select: [],
      }
    },
    methods: {
      onBuilding(building) {
        this.building = building
        this.getAllRoom()
        this.$refs.houseRoom.changeScrollLeft()
      },
      update() {
        controlMgr.buildingCount(this.building.buildingId).then(res => {
          this.counts = res
        })
        controlMgr.roomInfos(this.building.buildingId).then(res => {
          this.room = res
        }).catch(err => {
          this.select = []
          this.room = {}
          this.$Message.error(err)
        })
      },
      getAllRoom() {
        this.update()
      },
      onRooms(select) {
        this.select = select
      },
      onControlStatus(status) {
        controlMgr.roomControl(this.select, status).then(res => {
          this.select = []
          this.update()
        })
      }
    },
    created() {
      this.opt = this.$route.query
    },
  }
</script>
<style lang='scss' scoped>
  .room-control {
    padding: 10px;
    display: flex;
    width: 100%;
    overflow: hidden;

    .room-left {
      flex: 0 0 300px;
    }

    .room-right {
      width: calc(100% - 300px);
      flex: 1;
      padding: 10px;

      h2 {
        border-bottom: 1px #e8eaec solid;
        padding-bottom: 15px;
      }

    }
  }
</style>